<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3.2 文本与图片标签应用示例</title>
</head>
<body id="top">

    <!-- 一级标题 -->
    <h1>我的个人小站</h1>

    <!-- 二级标题 -->
    <h2>1. 文本排版示例</h2>

    <!-- 段落 -->
    <p>在网页中，我们可以通过各种标签来展示不同的文本效果。</p>

    <!-- 文本格式化 -->
    <p>
        例如，可以使用 <b>粗体（b）</b> 来强调，  
        或者 <i>斜体（i）</i> 表示特殊文字。  
        还可以用 <u>下划线</u> 来提示重点。
    </p>

    <!-- 上下标 -->
    <p>
        数学公式：H<sub>2</sub>O （水分子）  
        爱因斯坦公式：E = mc<sup>2</sup>
    </p>

    <!-- 删除和插入 -->
    <p>
        原价：<del>￥199</del>，现价：<ins>￥99</ins>
    </p>

    <!-- 引用 -->
    <blockquote>
        “学习 HTML 就像搭积木，每一个标签都是一块砖。”
    </blockquote>

    <!-- 代码和预格式化文本 -->
    <p>代码示例:</p>
    <pre>
for (let i = 0; i < 3; i++) {
    console.log("Hello HTML!");
}
    </pre>

    <!-- 分割线 -->
    <hr>

    <!-- 图片与超链接 -->
    <h2>2. 图片与超链接</h2>

    <!-- 插入图片 -->
    <p>下面展示一张风景图片：</p>
    <img src="images/scenery.jpg" alt="美丽的风景" width="300" title="点击查看更多风景">

    <!-- 超链接 -->
    <p>
        想要学习更多 HTML 知识？  
        请访问 <a href="https://www.w3schools.com" target="_blank">W3Schools</a>。
    </p>

    <!-- 锚点链接 -->
    <p>
        <a href="#top">返回顶部</a>
    </p>

</body>
</html>
